<template>
  <div class="header">
    <div class="left-content">
        <el-row class="tac">
          <el-col >
            <el-menu :router="true" :default-active="$route.path" class="el-menu-vertical-demo">
              <template  v-for="(item, i) in navTree" >
                <el-submenu :index="item.code" :key="i" v-if="item.child&&(!item.meta || item.meta.permission.indexOf(parseInt($store.state.userInfo.role)) !== -1)">
                  <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.name}}</span>
                  </template>
                    <el-menu-item-group  v-if="item.child" >
                      <el-menu-item v-for="(item2,i) in item.child" :index="item2.path"  :key="i">{{item2.name}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item :index="item.path"  :key="i" v-if="!item.child&&(!item.meta || item.meta.permission.indexOf(parseInt($store.state.userInfo.role)) !== -1)">
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.name}}</span>
                </el-menu-item>
              </template>
            </el-menu>
          </el-col>
        </el-row>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import userService from "@/service/userService";
import { navTree } from "@/constants/navConfig";
export default {
  name: "nav-menu",
  components: {
  },
  data() {
    return {
      maxHeight: 380,
      navTree: navTree
    };
  },
  beforeCreate() {
    Vue.prototype.GLOBAL = {
      oss: `http://sharespots.oss-cn-shanghai.aliyuncs.com/`
    };
  },
  mounted() {
    const self = this;
    self.init();
  },
  methods: {
    handleScroll() {
    },
    init() {
    },
    async infoInit() {
      let vm = this;
    },
    getCompany() {
      let vm = this,
        _data;
      _data = userService.getCompany();
      vm.$store.commit("setCompanyInfo", _data.data.data);
    }
  },
  watch: {
  }
};
</script>

<style lang="less" scoped>
.header {
  z-index: 99;
  width: 239px;
  text-align: left;
  background-color: #fff;
  border-right: 1px solid #ddd;
  display: block;
  min-height: 950px;
  height: 100%;
  color: #7e869e;
  float: left;
  .left-content {
    height: 100%;
    .nav {
    }
  }
}
.header-second {
  background-color: #ffffff;
  box-shadow: 0 0 5px #dcdcdc;
  .content {
    .aside-logo {
      .logo {
        background-image: url("/assets/img/main/gylogotwo.png");
      }
    }
  }
}
</style>
